<template>
  <div class="d_f">
    <div v-for="(item,index) in fields" :key="index" class="d_f a_i_c">
    <div class="step d_f j_c_c a_i_c" :class="{'top':index>0,'active':index==active,'active1':active>index}">
        {{active<=index? index+1:'' }}
       <img src="../assets/success.png" v-if="active>index" />
    </div>
    <div class="top p_r">
        <div class="title" :class="{'activeTle':index==active,'activedoc':active>index}">{{ item.title }}</div>
        <div class="doc" :class="{'activedoc':index<=active}">{{ item.doc }}</div>
    </div>
    <div class="line" v-if="index<fields.length-1" :class="{'activeline':index<active}"></div>
    </div>
  </div>
</template>

<script lang='ts'>
import {defineComponent, reactive, toRefs,onBeforeMount,onMounted} from 'vue'
interface item{
   title:string,
   doc:string 
}
export default defineComponent({
name:'',
props:{
    active: {
      type: Number,
      default: 0,
    }, //绑定值
    fields: { type: Array as () => item[], default: [] },
},
setup(){
const data = reactive({
})
onBeforeMount(()=>{
})
onMounted(()=>{
})
return {
...toRefs(data),
}
}
})
</script>
<style scoped lang='scss'>
.step{
    border: 1px solid rgba(0, 0, 0, 0.4);
    width: 24px;
    height: 24px; 
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.4);
    font-size: 16px;
}
.line{
    background: #DCDCDC;
    width: 180px;
    height: 2px;
    margin-left: 16px;
}
.title{
    color: rgba(0, 0, 0, 0.4); 
    font-size: 16px;
}
.doc{
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px; 
    margin-top: 4px; 
    position: absolute;
    width: 120px;
}
.top{
    margin-left: 16px;
}
.active{
    border: 1px solid #1878FF;
    background: #1878FF;
    color:  #fff;
}
.activeTle{
    color: #1878FF;
}
.activedoc{
    color: rgba(0, 0, 0, 0.6);
}
.active1{
    border: 1px solid #1878FF;
}
.activeline{
    background: #1878FF;
}
</style>